<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - charts.DataTable</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}
		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/animation.html">animation</a></li>
	
	<li><a href="../symbols/charts.html">charts</a></li>
	
	<li><a href="../symbols/charts.BarChart.html">charts.BarChart</a></li>
	
	<li><a href="../symbols/charts.BaseChart.html">charts.BaseChart</a></li>
	
	<li><a href="../symbols/charts.BubbleChart.html">charts.BubbleChart</a></li>
	
	<li><a href="../symbols/charts.ColumnChart.html">charts.ColumnChart</a></li>
	
	<li><a href="../symbols/charts.DataTable.html">charts.DataTable</a></li>
	
	<li><a href="../symbols/charts.DonutChart.html">charts.DonutChart</a></li>
	
	<li><a href="../symbols/charts.FunnelChart.html">charts.FunnelChart</a></li>
	
	<li><a href="../symbols/charts.GeoChart.html">charts.GeoChart</a></li>
	
	<li><a href="../symbols/charts.GeoLocations.html">charts.GeoLocations</a></li>
	
	<li><a href="../symbols/charts.Grid.html">charts.Grid</a></li>
	
	<li><a href="../symbols/charts.HoopChart.html">charts.HoopChart</a></li>
	
	<li><a href="../symbols/charts.LineChart.html">charts.LineChart</a></li>
	
	<li><a href="../symbols/charts.PieChart.html">charts.PieChart</a></li>
	
	<li><a href="../symbols/charts.TagChart.html">charts.TagChart</a></li>
	
	<li><a href="../symbols/charts.Tooltip.html">charts.Tooltip</a></li>
	
	<li><a href="../symbols/controls.html">controls</a></li>
	
	<li><a href="../symbols/controls.Calendar.html">controls.Calendar</a></li>
	
	<li><a href="../symbols/controls.DatePicker.html">controls.DatePicker</a></li>
	
	<li><a href="../symbols/controls.DateRangePicker.html">controls.DateRangePicker</a></li>
	
	<li><a href="../symbols/controls.html5.html">controls.html5</a></li>
	
	<li><a href="../symbols/controls.html5.InputDate.html">controls.html5.InputDate</a></li>
	
	<li><a href="../symbols/controls.html5.InputNumber.html">controls.html5.InputNumber</a></li>
	
	<li><a href="../symbols/controls.html5.InputRange.html">controls.html5.InputRange</a></li>
	
	<li><a href="../symbols/dom.html">dom</a></li>
	
	<li><a href="../symbols/dom.css.html">dom.css</a></li>
	
	<li><a href="../symbols/dom.DataStorage.html">dom.DataStorage</a></li>
	
	<li><a href="../symbols/dom.EventDispatcher.html">dom.EventDispatcher</a></li>
	
	<li><a href="../symbols/dom.events.html">dom.events</a></li>
	
	<li><a href="../symbols/dom.scripts.html">dom.scripts</a></li>
	
	<li><a href="../symbols/dom.Template.html">dom.Template</a></li>
	
	<li><a href="../symbols/formatters.html">formatters</a></li>
	
	<li><a href="../symbols/formatters.DateFormatter.html">formatters.DateFormatter</a></li>
	
	<li><a href="../symbols/formatters.NumberFormatter.html">formatters.NumberFormatter</a></li>
	
	<li><a href="../symbols/forms.html">forms</a></li>
	
	<li><a href="../symbols/forms.PlaceHolder.html">forms.PlaceHolder</a></li>
	
	<li><a href="../symbols/forms.Validation.html">forms.Validation</a></li>
	
	<li><a href="../symbols/graphics.html">graphics</a></li>
	
	<li><a href="../symbols/graphics.VmlHelper.html">graphics.VmlHelper</a></li>
	
	<li><a href="../symbols/locale.html">locale</a></li>
	
	<li><a href="../symbols/locale.Calendar.html">locale.Calendar</a></li>
	
	<li><a href="../symbols/locale.Validation.html">locale.Validation</a></li>
	
	<li><a href="../symbols/net.html">net</a></li>
	
	<li><a href="../symbols/net.HttpRequest.html">net.HttpRequest</a></li>
	
	<li><a href="../symbols/net.HttpServletRequest.html">net.HttpServletRequest</a></li>
	
	<li><a href="../symbols/net.ServletRequest.html">net.ServletRequest</a></li>
	
	<li><a href="../symbols/net.URL.html">net.URL</a></li>
	
	<li><a href="../symbols/util.html">util</a></li>
	
	<li><a href="../symbols/util.FileUtils.html">util.FileUtils</a></li>
	
	<li><a href="../symbols/util.Locale.html">util.Locale</a></li>
	
	<li><a href="../symbols/util.MetaData.html">util.MetaData</a></li>
	
	<li><a href="../symbols/util.Object.html">util.Object</a></li>
	
	<li><a href="../symbols/util.PropertyReader.html">util.PropertyReader</a></li>
	
	<li><a href="../symbols/util.StringUtils.html">util.StringUtils</a></li>
	
	<li><a href="../symbols/util.StringUtils.Base64.html">util.StringUtils.Base64</a></li>
	
	<li><a href="../symbols/util.StringUtils.JSON.html">util.StringUtils.JSON</a></li>
	
	<li><a href="../symbols/util.StringUtils.LZW.html">util.StringUtils.LZW</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class charts.DataTable
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				
				<br />Extends
					<a href="../symbols/dom.EventDispatcher.html">dom.EventDispatcher</a>.<br />
				
			
				
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/src_charts_DataTable.js.html">DataTable.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class charts.DataTable.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/charts.DataTable.html#constructor">charts.DataTable</a></b>(container)
							</div>
							<div class="description">DataTable constructor.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class charts.DataTable.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&lt;inner&gt; &nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/charts.DataTable.html#-DEFAULT_OPTIONS">DEFAULT_OPTIONS</a></b>
								</div>
								<div class="description">Default data table options.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				
				</dl>
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class charts.DataTable.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/charts.DataTable.html#draw">draw</a></b>(data, opt_options)
								</div>
								<div class="description">Draws the table based on <code>data</code> and <code>opt_options</code>.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/charts.DataTable.html#getColumn">getColumn</a></b>()
								</div>
								<div class="description">Gets active column data.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Methods borrowed from class <a href="../symbols/dom.EventDispatcher.html">dom.EventDispatcher</a>: </dt><dd><a href="../symbols/dom.EventDispatcher.html#addEventListener">addEventListener</a>, <a href="../symbols/dom.EventDispatcher.html#dispatchEvent">dispatchEvent</a>, <a href="../symbols/dom.EventDispatcher.html#removeEventListener">removeEventListener</a></dd>
				</dl>
				
			
<!-- ============================== events summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the events documented in the class charts.DataTable.">
					<caption>Event Summary</caption>
					<thead>
						<tr>
							<th scope="col">Event Attributes</th>
							<th scope="col">Event Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&lt;inner&gt; &nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/charts.DataTable.html#-event:sort">sort</a></b>()
								</div>
								<div class="description">Dispatched when any header column is clicked.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				
				</dl>
				
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>charts.DataTable</b>(container)
				</div>
				
				<div class="description">
					DataTable constructor.
					
				</div>
				
				
				
				<pre class="code"><b>Simple:</b>
<b>var</b> table = <b>new</b> charts.DataTable('container_id');
table.draw([
  ['Work', 'Eat', 'Commute', 'Watch TV', 'Sleep'], // Columns
  [100,      50,         30,         10,      40], // First row
  [140,       2,        110,        150,    1300]  // Second row
]);

<b>Complex:</b>
<b>var</b> options = {
  'bool-format': ['&lt;input type="checkbox" checked>',
                  '&lt;input type="checkbox">'],
  'date-format': 'YYYY-MM-dd'
};

<b>var</b> table = <b>new</b> charts.DataTable('container_id');

table.addEventListener('sort', <b>function</b>() {
  window.console <b>&&</b> console.log(table.getColumn());
});

table.draw([
  // Columns:
  [
    {label: '', type: 'bool', name: 'checkbox'}
    {label: 'Country', title: 'Title text', name: 'country', width: '40%'},
    {label: 'Population', type: 'number', name: 'population'},
    {label: 'Date', type: 'date', name: 'date', format: 'YYYY/MM/dd'}
  ],
  // Simple row:
  [true, 'Germany', 80619000, new Date(2013, 6, 31)],
  // Complex rows:
  [0, 'USA', 317638000, {value: new Date(2014, 2, 5), format: 'YY/MM/dd'}],
  [1, {label: 'Vatican', format: '&lt;b>{{ value }}&lt;/b>'}, 839, new Date],
], options);

<b>Styles: (default prefix: "data-")</b>
table.data-table {}
table.data-table caption {}
table.data-table thead tr th {}
table.data-table thead tr th span {}
table.data-table tbody tr td {}
table.data-table tfoot tr td {}
table.data-table tr.data-row-even {}
table.data-table tr.data-row-odd {}
table.data-table thead tr th.data-cell-text {}
table.data-table thead tr th.data-cell-date {}
table.data-table thead tr th.data-cell-bool {}
table.data-table thead tr th.data-cell-number {}
table.data-table tbody tr td.data-cell-text {}
table.data-table tbody tr td.data-cell-date {}
table.data-table tbody tr td.data-cell-bool {}
table.data-table tbody tr td.data-cell-number {}
table.data-table tfoot tr td.data-cell-text {}
table.data-table tfoot tr td.data-cell-date {}
table.data-table tfoot tr td.data-cell-bool {}
table.data-table tfoot tr td.data-cell-number {}
table.data-table thead th.data-sort-asc {}
table.data-table thead th.data-sort-desc {}</pre>
				
				
				
				
					
						<dl class="detailList">
						<dt class="heading">Parameters:</dt>
						
							<dt>
								<span class="light fixedFont">{string|Element}</span>  <b>container</b>
								
							</dt>
								<dd>The HTML container.</dd>
						
						</dl>
					
					
					
					
					
					
						<dl class="detailList">
						<dt class="heading">Requires:</dt>
						
							<dd><a href="../symbols/dom.css.html">dom.css</a></dd>
						
							<dd><a href="../symbols/dom.events.html">dom.events</a></dd>
						
							<dd><a href="../symbols/dom.Template.html">dom.Template</a></dd>
						
							<dd><a href="../symbols/formatters.NumberFormatter.html">formatters.NumberFormatter</a></dd>
						
							<dd><a href="../symbols/formatters.DateFormatter.html">formatters.DateFormatter</a></dd>
						
							<dd><a href="../symbols/util.Object.html">util.Object</a></dd>
						
						</dl>
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="-DEFAULT_OPTIONS"> </a>
					<div class="fixedFont">&lt;inner&gt; 
					
					
					<b>DEFAULT_OPTIONS</b>
					
					</div>
					<div class="description">
						Default data table options.
						
						
					</div>
					
					
					
					<pre class="code"><code>{
  'date-format': 'YYYY-MM-dd',      // Default date format.
  'bool-format': ['True', 'False'], // Default boolean format.
  'text-format': '{{ value }}',     // Default text template format.
  'css-prefix': 'data-',            // Default css prefix.
  'header': true,                   // Shows first row as header (THEAD).
  'footer': true,                   // Shows last row as footer (TFOOT).
  'caption': '',                    // Default table caption text.
  'sort': {
    'column': 0,                    // Default column index to sort by.
    'dir': 'asc'                    // Default sort direction.
  }
}</code></pre>
					
					

						
						
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="draw"> </a>
					<div class="fixedFont">
					
					
					<b>draw</b>(data, opt_options)
					
					</div>
					<div class="description">
						Draws the table based on <code>data</code> and <code>opt_options</code>.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{!Array.<Array>}</span> <b>data</b>
									
								</dt>
								<dd>A table data.</dd>
							
								<dt>
									<span class="light fixedFont">{Object=}</span> <b>opt_options</b>
									
								</dt>
								<dd>A configuration options.</dd>
							
							</dl>
						
						
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="#-DEFAULT_OPTIONS">DEFAULT_OPTIONS</a></dd>
							
							</dl>
						

					<hr />
				
					<a name="getColumn"> </a>
					<div class="fixedFont">
					
					<span class="light">{Object}</span>
					<b>getColumn</b>()
					
					</div>
					<div class="description">
						Gets active column data.
Useful while handling 'sort' event.
						
						
					</div>
					
					
					
					<pre class="code"><code>{
  'index': 'number, column index',
  'name': 'string, column name',
  'type': 'string, column type',
  'dir': 'string, column sort direction'
}</code></pre>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{Object}</span> Return active column data.</dd>
							
							</dl>
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
				<div class="sectionTitle">
					Event Detail
				</div>
				
					<a name="-event:sort"> </a>
					<div class="fixedFont">&lt;inner&gt; 
					
					
					<b>sort</b>()
					
					</div>
					<div class="description">
						Dispatched when any header column is clicked.
						
						
					</div>
					
					
					
					<pre class="code">table.addEventListener('sort', <b>function</b>() {
  window.console <b>&&</b> console.log(table.getColumn());
});</pre>
					
					
					
						
						
						
						
						
						
						

					
				
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0 on Thu Feb 12 2015 11:39:28 GMT+0200 (EET)
		</div>
	</body>
</html>
